import QtQuick
import QtQuick.Controls

Rectangle {
    width: 400
    height: 400

    Flickable {
        id: flick
        anchors.fill: parent
        contentWidth: column.width
        contentHeight: column.height
        clip: true  // 裁剪超出区域的内容

        // 边界回弹效果
        boundsBehavior: Flickable.DragAndOvershootBounds
        //boundsBehavior: Flickable.StopAtBounds

        // 内容区域
        Column {
            id: column
            spacing: 20
            width: flick.width

            Repeater {
                model: 20
                Rectangle {
                    width: column.width - 20
                    height: 50
                    color: index % 2 ? "darkCyan" : "cyan"
                    border.color: "gray"

                    Text {
                        anchors.centerIn: parent
                        text: "项目 " + (index + 1)
                        font.pixelSize: 20
                    }
                }
            }
        }

        // 滚动条指示器
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AsNeeded
        }
    }
}
